<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-demo01</title>
    <style>
        td{
            text-align: center;
            border: 1px solid red;
        }
    </style>
    
</head>
<body>
   
    <div id="app">
        <ul v-for="item in arr">
            <li>{{item}}</li>
        </ul>

        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(item,index) in users">
                <td>{{index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
        <hr>
        <p v-if="flag">刘老师太帅</p>
        <p v-show="flag">刘老师太帅</p>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                users:[
                    {name:"林志玲",age:18},
                    {name:"贾玲",age:48},
                    {name:"刘润泽",age:"和志玲姐差不多"},

                ],
                flag:false
            }
        })
    </script>
</body>
</html>